<template>
  <div class="container">
    <el-dialog
      title="绑定供应商"
      :visible.sync="dialogs.centerDialogVisible"
      width="50%"
      center
      :lock-scroll="true"
      @open="getData"
    >
      <div class="top">
        <el-select
          v-model="supplierId"
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请输入关键字"
          :remote-method="insideRemoteMethods"
          :loading="insides.loading"
        >
          <el-option
            v-for="item in insides.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-circle-plus" @click="add()">绑定供应商</el-button>
        <el-button type="success" icon="el-icon-circle-plus" @click="add('all')">绑定所有供应商</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
        <!-- <el-table-column type="selection" width="50" align="center"></el-table-column> -->
        <el-table-column prop="id" label="供应商ID" align="center"></el-table-column>
        <el-table-column prop="name" label="供应商" align="center"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="comitDialog">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>
<script>
import { supplierList } from "@/api/supplier/supplierList";
import { bindSupplier, getBindSupplierList } from "@/api/permission/adminlist";
import Pagination from "@/components/pagination";

export default {
  props: {
    dialogs: Object
  },
  components: {
    pagination: Pagination
  },
  data() {
    return {
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      insides: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
        id: "",
        buy_order_id: ""
      },
      supplierId: "",
      tableData: null
    };
  },
  created() {
    this.getDatas();
  },
  methods: {
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        admin_id: this.dialogs.id
      };
      getBindSupplierList(data).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.data;
          this.pageData.page = res.data.current_page;
          this.pageData.pagesize = res.data.per_page;
          this.pageData.total = res.data.total;
        }
      });
    },
    getDatas() {
      //获取初始化供应商列表
      let data = {
        page: 1,
        limit: 50
      };
      supplierList(data).then(res => {
        this.insides.options = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
      });
    },

    //获取供应商或者店铺ID
    getOptionIds(val) {
      this.formData.supplierId = val;
    },
    //获取供应商或者店铺数据
    getSupplierLists(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      this.insides.loading = true;
      supplierList(data).then(res => {
        this.insides.list = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
        this.insides.options = this.insides.list.filter(item => {
          this.insides.loading = false;
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    // 搜索供应商或者店铺数据
    insideRemoteMethods(query) {
      if (query !== "") {
        this.getSupplierLists(query);
      } else {
        this.insides.options = [];
      }
    },

    //提交表单
    add(e) {
      let data = { admin_id: this.dialogs.id };
      if (e) {
        this.$confirm("确定要绑定所有供应商吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            data.bind_all = "bind_all";
            bindSupplier(data).then(res => {
              if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });

                this.getData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            });
          })

          .catch(err => {
            console.log(err);
          });
      } else {
        if (this.supplierId) {
          data.supplier_ids = this.supplierId;
          bindSupplier(data)
            .then(res => {
              if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });

                this.getData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        }else{
            this.$message({
                  message: '请选择供应商',
                  type: "warning"
                });
        }
      }
    },
    // comitDialog() {},
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    }
  }
};
</script>
  <style scoped>
.top {
  margin-bottom: 10px;
}
</style>